<template>
  <div id="imageText" :class="jcc">
    <router-link class="ulw" :class="ulW4" to="" v-for="(item, index) in myOrder" :key="index">
      <ul>
        <li :class="Red">
          <span :class="item.ico"></span><img v-if="item.show" :src="item.img" alt="">{{number}}{{item.title}}
        </li>
        <li>{{item.text}}</li>
      </ul>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'imageText',
  props: ['myOrder', 'number', 'Red', 'ulW4', 'jcc']

}
</script>

<style scoped lang="less">
#imageText {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .ulw {
    display: block;
  }
  ul {
    padding: 15px 0;
    width: 100%;
    li {
      text-align: center;
    }
    li:nth-of-type(1) {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 42px;
      }
    }
  }
}
.ulw4 {
  width: 25%;
}
.red {
  color: rgba(255, 0, 0, 1);
}
.jcc {
  justify-content: flex-start !important;
}
</style>
